<template>
    <div class="brokerManage">
        <el-form :inline="true" size="small" :model="filterForm" class="demo-form-inline">
            <el-form-item label="城市：">
                <el-select v-model="filterForm.brokerCity" placeholder="请选择城市">
                    <el-option
                            v-for="item in allCityList"
                            :key="item.cityId"
                            :label="item.city"
                            :value="item.cityId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="经纪人名称：">
                <el-input v-model="filterForm.brokerName" placeholder="请输入姓名/手机号"></el-input>
            </el-form-item>
            <el-form-item label="角色：">
                <el-select v-model="filterForm.brokerType" placeholder="请选择角色">
                    <el-option label="全部" value=""></el-option>
                    <el-option
                            v-for="item in brokerTypeList"
                            :key="item.dicValue"
                            :label="item.dicDesc"
                            :value="item.dicValue">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属公司：">
                <el-input v-model="filterForm.companyName" placeholder="请输入所属公司"></el-input>
            </el-form-item>
            <el-form-item label="权限：">
                <el-select v-model="filterFormArr.permission" multiple placeholder="请选择权限">
                    <el-option label="新房" value="house"></el-option>
                    <el-option label="保险" value="insurance"></el-option>
                    <el-option label="产权" value="property"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="注册/开通时间：">
                <el-date-picker
                        v-model="filterFormArr.createTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
                <el-button type="primary" @click="handleExport">导出</el-button>
            </el-form-item>
        </el-form>
        <div class="mb20">
            <el-button type="primary" size="small" @click="goDetail('new')">新建经纪人</el-button>
        </div>
        <el-table
                :data="tableData"
                tooltip-effect="dark"
                border>
            <el-table-column
                    type="index"
                    align="center"
                    width="55"
                    label="序号">
            </el-table-column>
            <el-table-column
                    prop="brokerCity"
                    align="center"
                    label="城市">
            </el-table-column>
            <el-table-column
                    prop="brokerName"
                    align="center"
                    width="150"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="brokerPhone"
                    align="center"
                    width="150"
                    label="手机号">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    align="center"
                    width="150"
                    label="所属公司">
            </el-table-column>
            <el-table-column
                    prop="brokerType"
                    align="center"
                    width="120"
                    label="角色">
                <template slot-scope="scope">{{brokerTypeMap[scope.row.brokerType].dicDesc}}</template>
            </el-table-column>
            <el-table-column
                    prop="competence"
                    align="center"
                    label="权限">
                <template slot-scope="scope">{{formatCompetence(scope.row)}}</template>
            </el-table-column>
            <el-table-column
                    prop="house"
                    label="新房分佣比例">
                <template slot-scope="scope">{{scope.row.house === -1 ? '' : scope.row.house+ '%'}}</template>
            </el-table-column>
            <el-table-column
                    prop="insurance"
                    label="保险分佣比例">
                <template slot-scope="scope">{{scope.row.insurance === -1 ? '' : scope.row.insurance+ '%'}}</template>
            </el-table-column>
            <el-table-column
                    prop="property"
                    label="产权分佣比例">
                <template slot-scope="scope">{{scope.row.property === -1 ? '' : scope.row.property+ '%'}}</template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="注册开通时间">
            </el-table-column>
            <el-table-column
                    prop="lastLoginTime"
                    label="最新登录时间">
            </el-table-column>
            <el-table-column
                    prop="clientId"
                    label="clientID">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="150"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="goDetail('view', scope.row.id, scope.row.brokerCode)">查看</el-button>
                    <el-button type="text" @click="goDetail('edit', scope.row.id)">编辑</el-button>
                    <el-button type="text" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="mt15"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="filterForm.pageSize"
                :current-page="filterForm.pageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableDataTotal">
        </el-pagination>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'brokerManage',
        title: '经纪人管理',
        data() {
            return {
                filterForm: {
                    brokerCity: "",
                    brokerName: "",
                    brokerType: "",
                    companyName: "",

                    house: 0,
                    property: 0,
                    insurance: 0,

                    createTimeEnd: "",
                    createTimeStart: "",

                    pageNum: 1,
                    pageSize: 10,
                },
                filterFormArr: {
                    permission: [],
                    createTime: ['', '']
                },


                allCityList: [],
                brokerTypeList: [],
                brokerTypeMap: {},
                tableDataTotal: 10,
                tableData: []
            }
        },
        mounted() {
            this.getAllCity()
            this.getBrokerType()
            this.getTableList()
        },
        activated() {
            this.getTableList()
        },
        methods: {
            handleExport() {
                
                this.filterForm.pageNum = 1;

                this.filterForm.house = this.filterFormArr.permission.indexOf('house') > -1 ? 1 : 0;
                this.filterForm.property = this.filterFormArr.permission.indexOf('property') > -1 ? 1 : 0;
                this.filterForm.insurance = this.filterFormArr.permission.indexOf('insurance') > -1 ? 1 : 0;

                if (!this.filterFormArr.createTime) {
                    this.filterFormArr.createTime = ['', '']
                }
                this.filterForm.createTimeStart = this.formatTime(this.filterFormArr.createTime[0])
                this.filterForm.createTimeEnd = this.formatTime(this.filterFormArr.createTime[1])

                let params = JSON.parse(JSON.stringify(this.filterForm));
                params.pageSize = 999999999;


                let exportUrl = "";
                for (const key in params) {
                    exportUrl += "&" + key + "=" + params[key];
                }
                window.open(
                    this.$axios.baseURL + "/user/broker/brokerExportExcel?" + exportUrl.slice(1)
                );
                // this.$axios.post("/user/broker/brokerExportExcel", params).then((res) => {
                //     console.log(res);
                    
                // })

                //console.log(exportUrl)

            },
            query() {
                this.filterForm.pageNum = 1;

                this.filterForm.house = this.filterFormArr.permission.indexOf('house') > -1 ? 1 : 0;
                this.filterForm.property = this.filterFormArr.permission.indexOf('property') > -1 ? 1 : 0;
                this.filterForm.insurance = this.filterFormArr.permission.indexOf('insurance') > -1 ? 1 : 0;

                if (!this.filterFormArr.createTime) {
                    this.filterFormArr.createTime = ['', '']
                }
                this.filterForm.createTimeStart = this.formatTime(this.filterFormArr.createTime[0])
                this.filterForm.createTimeEnd = this.formatTime(this.filterFormArr.createTime[1])

                this.getTableList()
            },

            formatTime(date) {
                return date ? (date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()) : ''
            },
            formatCompetence(data) {
                let arr = []
                if (data.house !== -1) {
                    arr.push('新房')
                }
                if (data.insurance !== -1) {
                    arr.push('保险')
                }
                if (data.property !== -1) {
                    arr.push('产权')
                }
                return arr.join('、')
            },
            goDetail(type, id, brokerCode) {
                this.$router.push({
                    path: '/brokerManageDetail',
                    query: {
                        type,
                        id,
                        brokerCode,
                    }
                })
            },
            del(id) {
                this.$confirm('此操作将永久删除该经纪人, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("/user/broker/delete", {id}).then((res) => {
                        this.$message.success("删除成功")
                        this.query()
                    })
                }).catch(() => {
                });

            },
            reset() {
                this.filterForm = {
                    brokerCity: "",
                    brokerName: "",
                    brokerPhone: "",
                    brokerType: "",
                    companyName: "",
                    order: "asc",
                    house: 0,
                    property: 0,
                    insurance: 0,
                    createTimeEnd: "",
                    createTimeStart: "",
                    pageNum: 1,
                    pageSize: 10,
                };
                this.filterFormArr = {
                    permission: [],
                    createTime: ['', '']
                }
            },
            getTableList() {
                this.$axios.post("/user/broker/getBrokerList", this.filterForm).then((res) => {
                    this.tableData = res.list;
                    this.tableDataTotal = res.total;
                })
            },
            getBrokerType() {
                this.$axios.get("/user/broker/role/list").then((res) => {
                    this.brokerTypeList = res
                    let brokerTypeMap = {}
                    res.forEach((item, index) => {
                        brokerTypeMap[Number(item.dicValue)] = item
                    })
                    this.brokerTypeMap = brokerTypeMap;
                })
            },
            handleSizeChange(val) {
                this.filterForm.pageSize = val;
                this.getTableList()
            },
            handleCurrentChange(val) {
                this.filterForm.pageNum = val;
                this.getTableList()
            },
            getAllCity() {
                this.$axios.post('/city/cityList', {}).then((res) => {
                    this.allCityList = res.cityList
                })
            },
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">

</style>
